<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="antd.min.css">
    <script src="vue.min.js"></script>
    <script src="antd.min.js"></script>
    <style>
     
       
    </style>
</head>

<body>
    <div id="app">
        <div style="background-color:teal;text-align: center;width: 20%;margin-left: 40%; border:3px solid black;border-radius: 10%;">
            <p><input type="text" v-model="result" style="text-align: right" /></p>
            <p>
                <a-button type="danger"  @click="getReset()">清零</a-button>
            </p>
            <p>
                <a-button-group>
                    <a-button type="disabled" @click="getNum(7)">7</a-button>
                    <a-button type="disabled" @click="getNum(8)">8</a-button>
                    <a-button type="disabled" @click="getNum(9)">9</a-button>
                </a-button-group>
            </p>
            <p>
                <a-button-group>
                    <a-button type="disabled" @click="getNum(4)">4</a-button>
                    <a-button type="disabled" @click="getNum(5)">5</a-button>
                    <a-button type="disabled" @click="getNum(6)">6</a-button>
                </a-button-group>
            </p>
            <p>
                <a-button-group>
                    <a-button type="disabled" @click="getNum(1)">1</a-button>
                    <a-button type="disabled" @click="getNum(2)">2</a-button>
                    <a-button type="disabled" @click="getNum(3)">3</a-button>
                </a-button-group>
            </p>
            <p>
                <a-button-group>
                    <a-button type="disabled" @click="getNum(0)">0</a-button>
                    <a-button type="disabled"  @click="getCalc()">=</a-button>
                  
                </a-button-group>
            </p>
            <p>
                <a-button-group>
                    <a-button type="disabled" @click="setYsf('+')">+</a-button>
                    <a-button type="disabled" @click="setYsf('-')">-</a-button>
                    <a-button type="disabled" @click="setYsf('*')">x</a-button>
                    <a-button type="disabled" @click="setYsf('/')">/</a-button>
                </a-button-group>
            </p>
            
        
        </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                cache: "",
                ysf: "",
                result: ""
            },
            methods: {
                getNum: function(val) {
                    this.result += val;
                },
                setYsf: function(val) {
                    //获取x值
                    this.cache = this.result;
                    this.ysf = val;
                    this.result = ""
                },
                getCalc: function() {
                    if (this.ysf == "+") {
                        this.result = parseFloat(this.cache) + parseFloat(this.result);
                    } else if (this.ysf == "-") {
                        this.result = parseFloat(this.cache) - parseFloat(this.result);
                    }
                    else if (this.ysf == "*") {
                        this.result = parseFloat(this.cache) *parseFloat(this.result);
                    }
                    else if (this.ysf == "/") {
                        this.result = parseFloat(this.cache) / parseFloat(this.result);
                    }
                     else {
                        this.$message.warn("计算错误");
                    }
                },
                getReset: function() {
                    this.ysf = "";
                    this.result = "";
                    this.cache = "";
                }
            }
        })
    </script>
</body>

</html>